<template>
  <div id="tsl-his1" style="width:400px; height:350px;"></div>
</template>

<script>
export default {
  methods: {
    tsl() {
      var myChart = this.$echarts.init(document.getElementById('tsl-his1'));
      var option = {
        toolbox: {
          show: true,
           feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true, backgroundColor: 'black' }
          },
          iconStyle: {
             borderColor: 'white'
          },
          right: '30px'
        },
        title: {
          text: 'TOP10 销量城市',
          left: 'center',
          textStyle: {
            color: "orange"
          },
        },
        textStyle: {
          color: 'white'
        },
        tooltip: {},
        legend: {
          data: ['总计'],
          left: 30,
          textStyle: {
            color: "white"
          }
        },
        xAxis: {
          data: ['上海','北京', '深圳', '杭州', '成都', '广州', '南京', '武汉', '长沙', '西安']
        },
        yAxis: {},
        series: [
          {
            name: '总计',
            type: 'bar',
            data: [91,62,58,54,41,37,31,29,28,24],
            label: {              
              show: true,
              position: 'top',
              fontWeight: "bold",
              color: 'white'
            },
            colorBy: 'data'
            }
          ]
        };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.tsl()
  },
}
</script>

<style>

</style>